;(function(window,document){
    var _options = {
        pdEl:null,
        barWidth:'180px'
    };
    var weakColor = [252, 91, 63];  // Red
    var strongColor = [111, 213, 127];  // Green
    var defaultColor = [204, 204, 204];

    
    // Interpolate value between two colors.
    // Value is number from 0-1. 0 Means color A, 0.5 middle etc.
    function interpolateColor(rgbA, rgbB, value) {
        var rDiff = rgbA[0] - rgbB[0];
        var gDiff = rgbA[1] - rgbB[1];
        var bDiff = rgbA[2] - rgbB[2];
        value = 1 - value;
        return [
            rgbB[0] + rDiff * value,
            rgbB[1] + gDiff * value,
            rgbB[2] + bDiff * value
        ];
    }

    function rgbArrayToString(rgb) {
        return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
    }

    function barColor(progress) {
        return interpolateColor(weakColor, strongColor, progress);
    }
    function extend(obj,obj2){
        for(var k in obj2){ 
            if(obj.hasOwnProperty(k)){
                obj[k] = obj2[k];  
                
            }
        }  
        return obj;  
    }
    var PsStrengthBar = function(opts){
        var _opts = extend(_options,opts);
        var input = document.querySelector(_opts.pdEl);
        if(typeof(input)== "undefined" || input == null){
            throw new ReferenceError("密码输入框节点不存在");
        }
        
        var barDiv = document.createElement("div");
        barDiv.className = "progress-bg";
        barDiv.style.width = _opts.barWidth;
        barDiv.innerHTML = "<ul><li><span>1</span></li><li><span>1</span></li><li><span>1</span></li></ul>";
        var barContainer = document.createElement("div");
        barDiv.appendChild(barContainer);
        input.parentNode.appendChild(barDiv);
        var strengthBar = new ProgressBar.Line(barContainer, {
            color: '#ddd',
            trailColor: '#DDDDDD',
            duration: 800,
            easing: 'easeOut',
            strokeWidth: 1.8
        });
        var fragmentSpan = document.querySelectorAll(".progress-bg ul li span");
        for( var i = 0 , j = fragmentSpan.length ; i < j ; i++ ){
            fragmentSpan[i].style.height = barDiv.offsetHeight+1+'px';;
        }
        console.log("the password Strength Bar has inited!");
        input.addEventListener('input', function passwordChange() {
            
            var result = zxcvbn(input.value);
            var progress = result.score / 4;

            if (progress === 0 && input.value && input.value.length > 0) {
                progress = 0.1;
            }
            
            var startColor = +strengthBar.value().toFixed(3) === 0
                ? rgbArrayToString(defaultColor)
                : rgbArrayToString(barColor(strengthBar.value()));

            var endColor = progress === 0
                ? rgbArrayToString(defaultColor)
                : rgbArrayToString(barColor(progress));
            
            strengthBar.animate(progress, {
                from: { color: startColor },
                to: { color: endColor },
                step: function(state, bar) {
                    
                    bar.path.setAttribute('stroke', state.color);
                }
            });
        });
    };
    window.PsStrengthBar = PsStrengthBar;

}(window,document));